<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue入门</title>
  <style>
    .red-bg{background: red}
    .green-bg{background: green}
  </style>
</head>
<body>
  <div id="app">
    <p>{{message}}</p>
    <p>姓名：{{person.name}} 年龄：{{person.age}} 性别：{{person.gender}}</p>
    <!--    v-if 通过条件判断，决定是否加载标签-->
    <p v-if="person.age >= 18">{{person.name}}是成年人</p>
    <p v-else>{{person.name}}是未成年人</p>
    <!--    v-show 通过条件判断，决定标签是否显示或隐藏-->
    <p v-show="person.gender == '男'">{{person.name}}是男的</p>
    <p v-show="person.gender == '女'">{{person.name}}是女的</p>
    <!--    v-model 视图和模型双向绑定-->
    <p>姓名：<input type="text" v-model="person.name"> </p>
    <p>年龄：<input type="text" v-model="person.age"> </p>
    <p>性别：<input type="text" v-model="person.gender"> </p>
    <!--  v-bind用于绑定表单的属性 -->
    <table border="1px" v-bind:width="width">
      <tr><th>姓名</th><th>年龄</th><th>性别</th></tr>
      <!--  v-for 对数组进行遍历 遍历一个元素就会创建一个标签-->
      <tr v-for="per in persons" v-bind:class="per.gender == '男' ? 'red-bg' : 'green-bg' "  v-on:click="showPerson(per)">
        <td>{{per.name}}</td>
        <td>{{per.age}}</td>
        <td>{{per.gender}}</td>
      </tr>
    </table>
  </div>
  <!--  导入vue的js文件-->
  <script src="js/vue.min.js"></script>
  <script>
    //创建Vue对象 el属性 显示文字所在的页面标签
    // data属性（模型）需要进行绑定的数据
    new Vue({
      el:"#app",
      data:{
        message: "Hello!!Vue!",
        width: "400px",
        person: {name:"张三",age:20,gender:"男"},
        persons: [
          {name:"张三",age:20,gender:"男"},
          {name:"李四",age:23,gender:"女"},
          {name:"王五",age:25,gender:"男"},
          {name:"赵六",age:18,gender:"女"}
        ]
      },
      //方法的定义
      methods:{
        showPerson(per){
          alert("姓名：" + per.name +",年龄：" + per.age +"，性别：" + per.gender)
        }
      },
      created(){
        console.log('created')
      },
      mounted(){
        console.log('mounted')
      },
      updated(){
        console.log('updated')
      },
      unmounted(){
        console.log('unmounted')
      }
    })
  </script>
</body>
</html>